$white: #f7f7f7;
$red: #e1251b;
$size: 1rem;
$dark: #202040;
$dark1: #909090;
.html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img, button { margin:0; padding:0; }
a:link,a:visited,a:active { 
    color:$dark; 
    text-decoration:node; 
}
/* color */
$color :(
    'white': #f7f7f7,
    'dark': #202040,
    'dark1': #999999,
    'gold': #ffd739
);
@each $var,$key in $color {
    .text-#{$var} {
        color:$key
    }
    .bg-#{$var} {
        background-color:$key
    }
}
* {
  box-sizing: border-box;
}
/* text */
$postition1:(left,center,right);
@each $var in $postition1 {
    .text-#{$var} {
        text-align: $var
    }
}
/* font-size */
$fs:(
    'xxs': 0.6154,
    // 8px
    'xs': 0.7692
    //10px
    ,'s':0.9231 
    // 12px
    ,'m':1.0769
    //14px
    ,'l':1.2308,
    //16px
    'xl':1.3846,
    //18px,
    'xxl':1.5385,
    //20px,
    'xxxl':1.9231
    // 25px
);
@each $var,$key in $fs {
    .fs-#{$var} {
        font-size: $size * $key
    }
}
.text-money {
    font-size: 1.2308 * $size;
    color: $red;
}
.text-origin {
    font-size: 0.7692 * $size;
    color: $dark1;
    text-decoration: line-through;
}
.text-more1 {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
}

@each $var in 2,3,4,5 {
    .text-more#{$var} {
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: $var;
        line-clamp: $var;
        -webkit-box-orient: vertical;
    }
}


$swipe-height: (
    'xs': 10.3846, //135px
    's': 11.1538, // 145px
    'm': 11.9231, //155px
    'l': 12.6923, //165px
    'xl': 13.4615 // 175px 
); //175px

@each $var,$key in $swipe-height {
    .swipe-#{$var} {
        height: $key * $size;
    }
}

// margin padding 

$m: (
    'xs': 0.1538, //2px
    's': 0.3077, // 4px
    'm': 0.4615, //6px
    'l': 0.6154, //8px
    'xl': 0.7692 // 10px 
);

$position:(t:top,l:left,r:right,b:bottom);
@each $var,$key in $m {
    @each $item,$keys in $position {
        .m-#{$item}-#{$var} {
            margin-#{$keys}: $key * $size;
        }
        .p-#{$item}-#{$var} {
            padding-#{$keys}: $key * $size;
        }
        .m#{$item}-#{$var} {
            margin: $key * $size;
        }
        .p#{$item}-#{$var} {
            padding: $key * $size;
        }
    }
    .m-#{$var} {
        margin: $key * $size;
    }
    .p-#{$var} {
        padding: $key * $size;
    }
}


// border-radius
$radius:(10,20,30,40,50);
@each $var in $radius {
    .radius#{$var} {
        border-radius: $var * 1%;
    }
}

.clearfix:before,.clearfix:after {  /*清楚浮动*/
    content:"";
    display:table;
}

.clearfix:after{clear:both}

.shadow {
    box-shadow: 0 10px 40px -10px rgba(0,64,128,.2);
}


// display
$display:(b:block,f:flex,g:grid,n:none,ib:inline-block,i:inline);

@each $var,$key in $display {
    .d#{$var} {
        display:$key
    }
}

$flex:(start,center,right);
@each $var in $flex {
    .flex-#{$var} {
        justify-content: $var;
        align-items: $var;
    }
}

.ov-y-a {
  overflow-y: auto;
}

.ov-x-a {
  overflow-x: auto;
}

.pt-46 {
    padding-top: 3.5385rem;
}

.p-tb-46 {
    padding: 3.5385rem 0;
}
$position2:(fixed,relative,sticky,absolute);
@each $var in $position2 {
  .#{$var} {
      position: $var;
  }
}

.card {
  background-color: #f7f7f7;
}
.middle {
  vertical-align: middle;
}

@each $var in 0,1,2,3,4,5,6,7,8,9 {
    .op#{$var} {
        opacity: $var * 0.1;
    }
}


// 标签

